<template>
  <div v-show="showModal" @click.stop="closeCertificate" :class="[certificateInfo&&certificateInfo.shapeType==2?'c-ph40':'c-ph100','c-translucent-balck80 c-pz1000 c-pf c-flex-column c-p-t0 c-flex-center c-h c-w100 c-maxw640']">
    <img @click.stop="clickImg" src="" class="c-w100 c-br8" id="clockCuetImg" />
    <div class="c-fs24 c-textAlign-c c-mt16 c-fc-white">长按图片保存，发给微信好友或微信群</div>
    <div class="c-flex-row" v-if="certificateInfo" :class="certificateInfo.shapeType==1?'canvasBox':'shapecanvasBoxhor'">
      <div class="c-p" id="clockIncanvas2" :class="certificateInfo.shapeType==1?'anvasContent':'shapeanvasContenthor'" v-if="certificateInfo.certificateType==2">
        <img :src="$addXossFilter(certificateInfo.customizeImage)" alt class="c-w100 c-h img-pe-none">
        <div v-if="certificateInfo.customizeControl" class="customOne bgLocation">
          <div v-for="(item,index) in certificateInfo.customizeControl" :key="index">
            <div v-if="item.type==3" :style="item" class="c-pa">
              <div class="c-flex-column c-aligni-center">
                <img style="width:92px;height:92px;" :src="$addXossFilter(certificateInfo.headimgurl, require('@/assets/defult_head.png'))" alt class="headerImg120 c-brp50 img-pe-none">
                <p>{{certificateInfo.nickname}}</p>
              </div>
            </div>
            <div v-if="item.type==2" :style="item" class="c-pa c-table">
              <span class="c-tableCell" :style="'vertical-align:'+item.verticalAlign">{{item.name}}</span>
            </div>
            <img v-if="item.type==1" class="c-pa" :src="$addXossFilter(certificateInfo.qrcodeImg)" alt :style="item">
            <div v-if="item.type==6" :style="item" class="c-pa">
              <div class="c-flex-column c-aligni-center">
                <img style="width:92px;height:92px;" :src="$addXossFilter(certificateInfo.headimgurl || require('@/assets/defult_head.png'))" alt class="headerImg120 c-brp50 img-pe-none">
              </div>
            </div>
            <div v-if="item.type==7" :style="item" class="c-pa c-table">
              <span class="c-tableCell" :style="'verticalAlign:'+item.verticalAlign">
                {{item.nameTypeShow==2&&certificateInfo.realName?certificateInfo.realName:certificateInfo.nickname}}
              </span>
            </div>
            <img v-if="item.type==8" class="c-pa" :src="$addXossFilter(item.img, require('@/assets/defult270.png'))" alt :style="item">
            <div v-if="item.type==9" :style="item" class="c-pa c-table">
              <span class="c-tableCell" :style="'verticalAlign:'+item.verticalAlign">
                {{item.name}}
              </span>
            </div>
            <div v-if="item.type==10 && certificateInfo.number" :style="item" class="c-pa c-table">
              <span class="c-tableCell" :style="'word-break: break-all;verticalAlign:'+item.verticalAlign">
                证书编号：{{certificateInfo.number}}
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="anvasContent c-p" id="clockIncanvas1" v-if="certificateInfo.certificateType==1&&certificateInfo.shapeType==1">
        <img :src="$addXossFilter(certificateInfo.cardCover)" alt class="c-w100 c-h img-pe-none">
        <div class="customOne bgLocation">
          <div style="padding-top: 100px;">
            <div class="c-flex-column c-aligni-center">
              <div style="font-size: 60px;color: #333333;font-weight: 600;padding-bottom: 100px;" class="c-textAlign-c">{{certificateInfo.title}}</div>
              <div class="c-textAlign-c">
                <div style="font-size: 42px;color: #333333;" v-for="(item,index) in certificateInfo.titleArr" :key="index">{{item}}</div>
              </div>
              <img style="margin-top: 18px;width:92px;height:92px;" :class="certificateInfo.enableAvatarShow==1?'':'c-opacity0'" :src="$addXossFilter(certificateInfo.headimgurl, require('@/assets/defult_head.png'))" alt class="headerImg120 c-brp50 img-pe-none">
              <p class="c-pv10" style="font-size: 28px;color: #333333;" :class="certificateInfo.avatarShowType != 0?'':'c-opacity0'">{{certificateInfo.avatarShowType == 1 ? certificateInfo.nickname :
                certificateInfo.realName ? certificateInfo.realName : certificateInfo.nickname}}
              </p>
              <p style="font-size: 24px;color: #666;" class="c-pt10" v-for="(item,index) in shareDesc" :key="index">{{item.content}}</p>
            </div>
            <div style="padding-top: 60px;padding-bottom: 20px;" class="c-flex-row c-aligni-center c-justify-center">
              <div v-if="certificateInfo.signDay!=null" style="padding:0 20px;">
                <div style="width:130px;height: 163px;" class="c-p">
                  <img :src="certificateInfo.iconSign" alt="">
                  <div style="font-size: 24px;color: #fff;position: absolute;left: 0;right: 0;top: 76px;margin: 0 auto;text-align: center;">
                    {{ certificateInfo.signDay }}
                  </div>
                </div>
              </div>
              <div v-if="certificateInfo.continuoueDay!=null" style="padding:0 20px;">
                <div style="width:130px;height: 163px;" class="c-p">
                  <img :src="certificateInfo.iconContinue" alt="">
                  <div style="font-size: 24px;color: #fff;position: absolute;left: 0;right: 0;top: 76px;margin: 0 auto;text-align: center;">{{ certificateInfo.continuoueDay}}</div>
                </div>
              </div>
              <div v-if="certificateInfo.good!=null" style="padding:0 20px;">
                <div style="width:130px;height: 163px;" class="c-p">
                  <img :src="certificateInfo.iconGood" alt="">
                  <div style="font-size: 24px;color: #fff;position: absolute;left: 0;right: 0;top: 76px;margin: 0 auto;text-align: center;">{{ certificateInfo.good }}</div>
                </div>
              </div>
              <div v-if="certificateInfo.like!=null" style="padding:0 20px;">
                <div style="width:130px;height: 163px;" class="c-p">
                  <img :src="certificateInfo.iconLike" alt="">
                  <div style="font-size: 24px;color: #fff;position: absolute;left: 0;right: 0;top: 76px;margin: 0 auto;text-align: center;">{{ certificateInfo.like }}</div>
                </div>
              </div>
            </div>
            <p style="font-size: 24px;color: #666;" class="c-pt10 c-textAlign-c" v-for="(item,index) in wordArr" :key="index">{{item}}</p>
            <div style="font-size: 24px;" class="c-pt10 c-textAlign-c c-fc-sgray">{{"- "+mpName+" -"}}</div>
            <div class="c-flex-row c-aligni-center" style="padding-top: 60px;width: 600px;margin: 0 auto;">
              <div :class="certificateInfo.enableShowQrCode == 0||
                (certificateInfo.enableInstitution == 0&&certificateInfo.enableGrantTime == 0&&certificateInfo.enableNumber == 0&&certificateInfo.enableStamp==0)?'c-justify-center':'c-justify-sb'" style="width:540px;margin:auto" class="c-flex-row">
                <div v-if="certificateInfo.enableShowQrCode==1" class="c-flex-column c-aligni-center c-textAlign-c c-justify-center">
                  <img :src="$addXossFilter(certificateInfo.qrcodeImg)" alt class="img-pe-none" style="width:140px;height:140px">
                  <div class="c-textAlign-c c-fc-sblack" v-if="certificateInfo.enableShowQrCode==1" style="width:170px;font-size:20px;margin-top:12px">{{certificateInfo.qrCodeText}}</div>
                </div>
                <div style="width: 300px;" v-if="!(certificateInfo.enableInstitution == 0&&certificateInfo.enableGrantTime == 0&&certificateInfo.enableNumber == 0&&certificateInfo.enableStamp==0)" class="c-flex-column c-p">
                  <div v-if="certificateInfo.enableStamp!=0" style="width: 120px;height: 120px;margin: 0 auto;position: absolute;left: 0;
                right: 0;top: 0;bottom: 0;margin: 0 auto;"><img :src="certificateInfo.enableStamp==2?certificateInfo.stampImg:require('@/assets/i/wap/camp/pass.png')" alt=""></div>
                  <div style="font-size: 22px;color: #333333;width: 300px;" v-if="certificateInfo.enableInstitution == 1">{{certificateInfo.institutionName}}</div>
                  <div style="font-size: 20px;color: #666;margin-top: 14px;" v-if="certificateInfo.enableGrantTime == 1">发证日期：{{ certificateInfo.createdAt }}</div>
                  <div style="font-size: 20px;color: #666;margin-top: 8px;width: 300px;word-break: break-all;" v-if="certificateInfo.enableNumber&&certificateInfo.number">证书编号：{{certificateInfo.number}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="anvasContenthor c-p" id="clockIncanvas3" v-if="certificateInfo.certificateType == 1&&certificateInfo.shapeType==2">
        <img :src="$addXossFilter(certificateInfo.cardCover)" alt class="c-w100 c-h img-pe-none">
        <div class="customOne bgLocation">
          <div style="font-size: 30px;color: #333333;font-weight: 800;padding-top: 36px;" class="c-textAlign-c">{{certificateInfo.title}}</div>
          <div style="margin:32px auto 0;">
            <div class="c-flex-column c-aligni-center c-justify-center">
              <div class="c-brp50 c-text-hidden" style="width:50px;height:50px;" :class="certificateInfo.enableAvatarShow==0?'c-opacity0':''">
                <img :src="$addXossFilter(certificateInfo.headimgurl, require('@/assets/defult_head.png'))" alt class="c-w100 c-h img-pe-none">
              </div>
              <div class=" c-fw-b c-textAlign-c" style="height:24px;font-size:16px;margin-top:4px;">
                {{certificateInfo.avatarShowType == 1 ? certificateInfo.nickname :
                  certificateInfo.realName ? certificateInfo.realName : certificateInfo.nickname}}</div>
              <p style="font-size: 14px;color: #666;" class="c-pt10" v-for="(item,index) in shareDesc" :key="index">{{item.content}}</p>
            </div>
            <div style="padding-top: 20px;padding-bottom: 10px;" class="c-flex-row c-aligni-center c-justify-center">
              <div v-if="certificateInfo.signDay!=null" style="padding:0 20px;">
                <div style="width:50px;height: 60px;" class="c-p">
                  <img :src="certificateInfo.iconSign" alt="">
                  <div style="line-height:10px;font-size: 10px;color: #fff;position: absolute;left: 0;right: 0;top: 26px;margin: 0 auto;text-align: center;">
                    {{ certificateInfo.signDay }}
                  </div>
                </div>
              </div>
              <div v-if="certificateInfo.continuoueDay!=null" style="padding:0 20px;">
                <div style="width:50px;height: 60px;" class="c-p">
                  <img :src="certificateInfo.iconContinue" alt="">
                  <div style="line-height:10px;font-size: 10px;color: #fff;position: absolute;left: 0;right: 0;top: 26px;margin: 0 auto;text-align: center;">{{ certificateInfo.continuoueDay}}</div>
                </div>
              </div>
              <div v-if="certificateInfo.good!=null" style="padding:0 20px;">
                <div style="width:50px;height: 60px;" class="c-p">
                  <img :src="certificateInfo.iconGood" alt="">
                  <div style="line-height:10px;font-size: 10px;color: #fff;position: absolute;left: 0;right: 0;top: 26px;margin: 0 auto;text-align: center;">{{ certificateInfo.good }}</div>
                </div>
              </div>
              <div v-if="certificateInfo.like!=null" style="padding:0 20px;">
                <div style="width:50px;height: 60px;" class="c-p">
                  <img :src="certificateInfo.iconLike" alt="">
                  <div style="line-height:10px;font-size: 10px;color: #fff;position: absolute;left: 0;right: 0;top: 26px;margin: 0 auto;text-align: center;">{{ certificateInfo.like }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="c-textAlign-c c-fc-xblack" style="font-size: 18px;">
            <div style="margin-bottom: 6px;" v-for="(item,index) in wordArr" :key="index">{{ item }}</div>
          </div>
          <div class="c-pa c-w100" style="top: 400px;">
            <div class="c-flex-row c-aligni-center" style="width: 600px;margin: 0 auto;">
              <div style="width:600px;margin:auto" class="c-flex-row c-aligni-center c-justify-sb">
                <div>
                  <div v-if="certificateInfo.enableShowQrCode==1" class="c-flex-row c-aligni-center c-justify-center">
                    <img :src="$addXossFilter(certificateInfo.qrcodeImg)" alt class="img-pe-none" style="width:76px;height:76px">
                    <div class="c-textAlign-l" v-if="certificateInfo.enableShowQrCode==1" style="height: 48px;width:160px;font-size:16px;margin-left: 10px;color: #666;">{{certificateInfo.qrCodeText}}</div>
                  </div>
                </div>
                <div>
                  <div v-if="!(certificateInfo.enableInstitution == 0&&certificateInfo.enableGrantTime == 0&&certificateInfo.enableNumber == 0&&certificateInfo.enableStamp==0)" class="c-flex-column c-p c-textAlign-r">
                    <div v-if="certificateInfo.enableStamp!=0" style="width: 96px;height: 96px;margin: 0 auto;position: absolute;left: 0;
                right: 0;top: 0;bottom: 0;margin: 0 auto;"><img :src="certificateInfo.enableStamp==2?certificateInfo.stampImg:require('@/assets/i/wap/camp/pass.png')" alt=""></div>
                    <div style="font-size: 16px;color: #333333;" v-if="certificateInfo.enableInstitution == 1">{{certificateInfo.institutionName}}</div>
                    <div style="font-size: 16px;color: #666;margin-top: 8px;" v-if="certificateInfo.enableGrantTime == 1">发证日期：{{ certificateInfo.createdAt }}</div>
                    <div style="font-size: 16px;color: #666;margin-top: 8px;word-break: break-all;" v-if="certificateInfo.enableNumber&&certificateInfo.number">证书编号：{{certificateInfo.number}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let html2canvas = null;
// const CANVAS_WIDTH = 750;
// const CANVAS_HEIGHT = 1334;
// const CUR_TIMETAMP = new Date().getTime();
import { utilJs } from "@/utils/common.js"
let imgData = {};
export default {
  name: "CertificateCom",
  props: {
    showCertificate: {
      type: Boolean,
      default: false
    },
    certInfo: {
      type: Object,
      default: {

      }
    },
    showReward: {
      type: Boolean,
      default: false
    },
    bigType: {
      type: String,
      default: ''
    },
    prodType: {
      type: String,
      default: ''
    },
    prodId: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      showModal: false,
      certificateInfo: null,
      shareDesc:[],
      wordArr:[],
      mpName:localStorage.getItem('mpName'),
      time : new Date().getTime()
    };
  },
  mounted() {
    import(/* webpackChunkName: "html2canvas" */"@/utils/html2canvas-1.4.1.js").then(res => {
      html2canvas = res.default;
    })
    utilJs.getAliSign(`${global.apiurl}imageSign`, (res) => {
      imgData = res;
    });
  },
  computed: {},
  watch: {
    showCertificate(val) {
      this.showModal = val;
      if (val) {
        this.showcertInfo()
      }
    },
    // certInfo(val) {
    //   console.log(11112222)
    //   this.time = new Date().getTime()
    //   if (!this.showModal) {
    //     this.showcertInfo()
    //     return
    //   }
    //   if (Object.keys(val).length > 0) {
    //     this.certificateInfo = val;
    //     let $this = this
    //     if ($this.certificateInfo.certificateType == 2) {
    //       if ($this.certificateInfo.customizeControl) {
    //           for (let i = 0; i < $this.certificateInfo.customizeControl.length; i++) {
    //             $this.certificateInfo.customizeControl[i].height = $this.certificateInfo.customizeControl[i].height * 2 + 'px'
    //             $this.certificateInfo.customizeControl[i].width = $this.certificateInfo.customizeControl[i].width * 2 + 'px'
    //             $this.certificateInfo.customizeControl[i].lineHeight = $this.certificateInfo.customizeControl[i].lineHeight * 2 + 'px'
    //             $this.certificateInfo.customizeControl[i].left = $this.certificateInfo.customizeControl[i].posX * 2 + 'px'
    //             $this.certificateInfo.customizeControl[i].top = $this.certificateInfo.customizeControl[i].posY * 2 + 'px'
    //             $this.certificateInfo.customizeControl[i].fontSize = $this.certificateInfo.customizeControl[i].size * 2 + 'px'
    //             $this.certificateInfo.customizeControl[i].letterSpacing = $this.certificateInfo.customizeControl[i].letterSpacing * 2 + 'px'
    //           }
    //           document.ontouchstart = null;
    //           document.ontuchmove = null;
    //           document.ontouchend = null;
    //           $this.$nextTick(() => {
    //             $this.canvas();
    //           });
    //         }
    //     } else {
    //       this.shareDesc = [];
    //       let shareContant = $this.certificateInfo.shareDesc ? $this.certificateInfo.shareDesc : '恭喜你！完成打卡'
    //       if (shareContant.length > 24) {
    //         let firstShare = shareContant.substring(0, 24)
    //         let secendShare = shareContant.substring(24, 36)
    //         firstShare && this.shareDesc.push({
    //           content: firstShare
    //         });
    //         secendShare && this.shareDesc.push({
    //           content: secendShare
    //         });
    //       } else {
    //         shareContant && this.shareDesc.push({
    //           content: shareContant
    //         });
    //       }
    //       this.wordArr = [];
    //       if ($this.certificateInfo.isDefaultWord == 1) {
    //         let defaultWord = $this.certificateInfo.word[0];
    //         let firstLine = defaultWord.substring(0, 11);
    //         let secendLine = defaultWord.substring(11, 29);
    //         let thirdLine = defaultWord.substring(29, 44);
    //         firstLine && this.wordArr.push(
    //           firstLine
    //         );
    //         secendLine && this.wordArr.push(
    //           secendLine
    //         );
    //         thirdLine && this.wordArr.push(
    //           thirdLine
    //         );
    //       } else {
    //         this.wordArr = $this.certificateInfo.word;
    //       }
    //       document.ontouchstart = null;
    //       document.ontuchmove = null;
    //       document.ontouchend = null;
    //       $this.$nextTick(() => {
    //         $this.canvas();
    //       });
    //     }
    //   }
    // }
  },
  methods: {
    showcertInfo(val) {
      console.log(4542342342)
      this.time = new Date().getTime()
      if (Object.keys(this.certInfo).length > 0) {
        this.certificateInfo = this.certInfo;
        let $this = this
        if ($this.certificateInfo.certificateType == 2) {
          if ($this.certificateInfo.customizeControl) {
              for (let i = 0; i < $this.certificateInfo.customizeControl.length; i++) {
                $this.certificateInfo.customizeControl[i].height = $this.certificateInfo.customizeControl[i].height * 2 + 'px'
                $this.certificateInfo.customizeControl[i].width = $this.certificateInfo.customizeControl[i].width * 2 + 'px'
                $this.certificateInfo.customizeControl[i].lineHeight = $this.certificateInfo.customizeControl[i].lineHeight * 2 + 'px'
                $this.certificateInfo.customizeControl[i].left = $this.certificateInfo.customizeControl[i].posX * 2 + 'px'
                $this.certificateInfo.customizeControl[i].top = $this.certificateInfo.customizeControl[i].posY * 2 + 'px'
                $this.certificateInfo.customizeControl[i].fontSize = $this.certificateInfo.customizeControl[i].size * 2 + 'px'
                $this.certificateInfo.customizeControl[i].letterSpacing = $this.certificateInfo.customizeControl[i].letterSpacing * 2 + 'px'
              }
              document.ontouchstart = null;
              document.ontuchmove = null;
              document.ontouchend = null;
              $this.$nextTick(() => {
                $this.canvas();
              });
            }
        } else {
          this.shareDesc = [];
          let shareContant = $this.certificateInfo.shareDesc ? $this.certificateInfo.shareDesc : '恭喜你！完成打卡'
          if (shareContant.length > 24) {
            let firstShare = shareContant.substring(0, 24)
            let secendShare = shareContant.substring(24, 36)
            firstShare && this.shareDesc.push({
              content: firstShare
            });
            secendShare && this.shareDesc.push({
              content: secendShare
            });
          } else {
            shareContant && this.shareDesc.push({
              content: shareContant
            });
          }
          this.wordArr = [];
          if ($this.certificateInfo.isDefaultWord == 1) {
            let defaultWord = $this.certificateInfo.word[0];
            let firstLine = defaultWord.substring(0, 11);
            let secendLine = defaultWord.substring(11, 29);
            let thirdLine = defaultWord.substring(29, 44);
            firstLine && this.wordArr.push(
              firstLine
            );
            secendLine && this.wordArr.push(
              secendLine
            );
            thirdLine && this.wordArr.push(
              thirdLine
            );
          } else {
            this.wordArr = $this.certificateInfo.word;
          }
          document.ontouchstart = null;
          document.ontuchmove = null;
          document.ontouchend = null;
          $this.$nextTick(() => {
            $this.canvas();
          });
        }
      }
    },
    canvas() {
      let domTest = this.certificateInfo.certificateType == 2 ? document.getElementById("clockIncanvas2") : (this.certificateInfo.certificateType == 1 && this.certificateInfo.shapeType == 2 ? document.getElementById("clockIncanvas3") : document.getElementById("clockIncanvas1"));
      if (!domTest) {
        return;
      }
      html2canvas(domTest, {
        useCORS: true,
        height: domTest.offsetHeight, // 解决当前页面生成图片出现白边问题
        width: domTest.offsetWidth,
      }).then(canvas => {// eslint-disable-line
        // document.body.appendChild(canvas);
        let ctx = canvas.getContext("2d");
        this.canvasToImage(ctx);
      });
    },
      // 获取毕业福利
    getReward() {
      this.$emit("getReward");
    },
    clickImg() { },
    closeCertificate() {
      this.$emit("closeCertificate");
      let ig = document.getElementById("clockCuetImg");
      ig.setAttribute("src", '');
      this.showModal = false;
    },
    showCerImage(dataURL) {
      let ig = document.getElementById("clockCuetImg");
      ig.setAttribute("src", dataURL);
      this.showModal = true;
    },
    updateCardImage(blob) {
      let that = this;
      let blobDate = []
      blob.name = 'CertificateCom'
      blobDate.push(blob)
      console.log(blobDate)
      utilJs.imgUpload(blobDate, imgData, 'clockIn', res => {
        let image = res
        utilJs.postMethod(global.apiurl + 'Certificate/updateCardImage', {
          type:that.bigType,
          prodType:that.prodType,
          prodId:that.prodId,
          image:image,
          id:that.certificateInfo.id
        }, function () {
          that.$emit('updateImgeUrl', image);
        });
      });
    },
    //将canvas转成图片
    canvasToImage(ctx) {
      try {
        let quality = 1
        let dataURL, blob
        do {
        dataURL = ctx.canvas.toDataURL('image/jpeg', quality)
        blob = this.dataURItoBlob(dataURL)
          if (quality > 0.1) {
            quality -= 0.01
          } else {
            quality -= 0.015
          }
        } while (blob.size > 5242880 && quality > 0.07)
        let ig = document.getElementById("clockCuetImg");
        ig.setAttribute("src", dataURL);
        // var dataURL = ctx.canvas.toDataURL("image/jpg");
        // let ig = document.getElementById("clockCuetImg");
        // var blob = this.dataURItoBlob(dataURL);
        this.$emit("canvasOver");
        ctx = null;
        this.updateCardImage(blob)
      } catch (err) {
        this.$emit("canvasOver");
        console.log("canvas转成图片失败");
        console.log(err);
      }
    },
    dataURItoBlob(base64Data) {
      var byteString;
      if (base64Data.split(',')[0].indexOf('base64') >= 0) {
        byteString = atob(base64Data.split(',')[1]);
      } else {
        byteString = unescape(base64Data.split(',')[1]);
      }
      var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
      var ia = new Uint8Array(byteString.length);
      for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      return new Blob([ia], { type: mimeString});
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.pop-rep-button{
  font-size: 12px;
  color: #FFF;
  width: 150px;
  height: 30px;
  line-height: 30px;
  background: #EF7F31;
  border-radius: 24px;
  margin: 10px auto 0 auto;
  text-align: center
}
.canvasBox {
  width: 750px;
  height: 1334px;
  top: -999999999px;
  left: -30000000px;
  z-index: -999;
  position: absolute;
}
.anvasContent {
  width: 750px;
  height: 1334px;
  background: #fff;
  position: relative;
  /* position: absolute;
  top: -600px; */
}
.bgLocation {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.canvasBoxhor {
  width: 750px;
  height: 530px;
  top: -999999999px;
  left: -30000000px;
  z-index: -999;
  position: absolute;
}
.anvasContenthor {
  width: 750px;
  height: 530px;
  position: relative;
}
.shapecanvasBoxhor {
  width: 1060px;
  height: 750px;
  top: -999999999px;
  left: -30000000px;
  z-index: -999;
  position: absolute;
}
.shapeanvasContenthor{
  width: 1060px;
  height: 750px;
  position: relative;
}
</style>
